<template>
  <view class="content">
    <head-box></head-box>
    <view class="wq_con tab-botton">
      <view class="banner">
        <image src="/static/img/wqbf_banner.png" mode="aspectFill"></image>
      </view>
      <view>
        <view v-for="(tabItem, tabIndex) in sceneList" :key="tabIndex">
          <view class="quntuanListPage-main-header">
            <div class="quntuanListPage-main-title">{{ tabItem.name }}</div>
          </view>
          <view class="box_list">
            <view
              class="item"
              v-for="(item, index) in tabItem.list"
              :key="index"
              :data-id="item.id"
            >
              <view @tap="onTabGm(item.id,item.name,item)">
                <view><image :src="item.img" mode="aspectFit"></image></view>
                <view
                  ><text>{{ item.name }}</text></view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <tabs-box></tabs-box>
  </view>
</template>

<script>
  import { getGroupUrl } from '@/common/request.js'
  import { goLogin, indexOfencodeURIComponent } from '@/common/base.js'
  import {getScene} from '@/api/scene'
  import  {getDictItemstList } from '@/api/dict'
  export default {
    data() {
      return {
        sceneList: [], //场景列表合并
      }
    },
    onLoad() {
      this.getDictItems('scene_fx_type')
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods: {
      //场景信息-分页列表查询
      async getDictCode(item, params) {
        const {
          result: { records },
        } = await getScene(params)
        const list = []
        records.map((p, index) => {
          const { id, sceneName: name, sceneLogo: img,sceneCode } = p
          list.push({
            id,
            name,
            img: this.$api.getImgUrl(img),
            sceneCode
          })
        })
        this.sceneList.push({
          value: item.value,
          name: item.title,
          list,
        })
      },
      //字典
      async getDictItems(dictCode) {
        const { code, result } = await getDictItemstList({
          dictCode,
          sign: '',
        })
        if (code === 0) {
          if (result.length) {
            result.map(async (item, index) => {
              const params = {
                sceneFxType: item.value,
                sceneHidden: '2',
              }
              await this.getDictCode(item, params)
            })
          }
        }
      },
      //进第三方详情
      onTabGm(id,sceneName,item) {
        this.$clickGpScenePv(item.sceneCode)
        getGroupUrl(id).then((res) => {
          const { code, message } = res
          if (code === 401) {
            goLogin()
            return
          }
          if (code === 500) {
            this.$api.msg(message)
            return
          }
          if (res.success) {
            return indexOfencodeURIComponent(res.result,sceneName)
          }
        })
      },
    },
  }
</script>

<style lang="scss">
  .content {
    height: 100vh;
    margin-bottom: 120rpx;
    .wq_con {
      padding: 30rpx;
      .banner {
        width: 100%;
        height: 280rpx;
        margin-bottom: 60rpx;
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .quntuanListPage-main-title {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
        border-left: 6rpx solid #0071fc;
        background-image: linear-gradient(left, #eff6ff, #ffffff);
        padding-left: 20rpx;
      }

      .box_list {
        display: flex;
        display: -webkit-flex;
        -webkit-box-pack: justify;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 50rpx 0;
        .item {
          width: 25%;
          text-align: center;
          padding: 20rpx 0;
          image {
            width: 70rpx;
            height: 70rpx;
          }
          text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
